<template>
    <div class="page-head">
        <div @click="isCollapse = !isCollapse">
            <el-icon 
                size="24"
                class="my-icon"
            >
                <Fold v-if="!isCollapse" />
                <Expand v-else />
            </el-icon>
        </div>
        <el-tabs
            v-model="currentTab"
            type="card"
            :closable="tabsArr?.length > 1"
            class="my-tabs"
            @edit="handleTabsEdit"
            @tab-change="handleTabsChange"
        >
            <el-tab-pane
                v-for="item in tabsArr"
                :key="item.routerPath"
                :label="item.title"
                :name="item.routerPath"
            >
                <!-- {{ item.content }} -->
            </el-tab-pane>
        </el-tabs>
        <el-dropdown 
            class="my-dropdown"
            @command="handleCommand"
        >
            <div class="my-dropdown-head">
                <el-icon 
                    size="16"
                    class="my-tarn-icon"
                >
                    <Grid />
                </el-icon>
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item 
                        v-for="(item, index) in formData"
                        :key="'1-' + index"
                        divided
                        :command="item.command"
                    >
                        <div style="display: flex; align-items: center;">
                            <el-icon 
                                size="16"
                            >
                                <!-- <CircleClose /> -->
                                <component :is="item.currentIcon" />
                            </el-icon>
                            <div>{{ item.name }}</div>
                        </div>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, watch  } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import {
        Document,
        Menu as IconMenu,
        Setting,
        House,
        Notification,
        Connection,
        Odometer,
        Lock,
        Search,
        Bell,
        FullScreen,
        Refresh,
        CircleClose,
        Warning,
        Fold,
        ArrowDown,
        Expand,
        Close,
        Grid,
    } from '@element-plus/icons-vue'
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    // 定义组件名字
    // defineOptions({
    //     name: "Self",
    // });
    const isCollapse = defineModel<boolean>('isCollapse', {
        required: false,
        default: false,
    })
    const defaultActive = defineModel<string>('defaultActive', {
        required: false,
        default: '',
    })
    const currentTab = defineModel<string>('currentTab', {
        required: false,
        default: '',
    })
    const tabsArr = defineModel<any[]>('tabsArr', {
        required: false,
        default: [],
    })
    const props = withDefaults(defineProps<{
        menuItems?: any[], 
    }>(), {
        menuItems: () => [],
    })
    // const emits = defineEmits<{
    //     // 'update:isCollapse': [data: boolean]
    // }>()

    let tabIndex = 1
    const handleTabsEdit = (targetName: any, action: 'remove' | 'add') => {
        if (action === 'add') {
            // const newTabName = `${++tabIndex}`
            // tabsArr.value.push({
            //     title: 'New Tab',
            //     name: newTabName,
            // })
            // currentTab.value = newTabName
        } else if (action === 'remove') {
            const tabs = tabsArr.value
            let activeName = currentTab.value
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.routerPath === targetName) {
                        const nextTab = tabs[index + 1] || tabs[index - 1]
                        if (nextTab) {
                            activeName = nextTab.routerPath
                            defaultActive.value = nextTab.routerPath
                            router.push(nextTab.routerPath)
                        }
                    }
                })
            }
            currentTab.value = activeName
            tabsArr.value = tabs.filter((tab) => tab.routerPath !== targetName)
            
        }
    }
    const bianli = (data, name) => {
        for (let i=0; i<data.length; i++) {
            if (data[i].routerPath == name) {
                defaultActive.value = name
                return true;
            } else if (data[i].children?.length > 0) {
                bianli(data[i].children, name)
            }
        }
    }
    const handleTabsChange = (name) => {
        console.log(name)
        router.push(name)

        bianli(props.menuItems, name)
    }
    watch(() => route.fullPath, (nval, oval) => {
        console.log(nval)
        console.log(currentTab.value)
        if (!tabsArr.value.some((item, index) => {return item.routerPath == route.fullPath})) {
            tabsArr.value.push({
                title: route?.meta?.title,
                routerPath: route.fullPath,
            })
            // defaultActive.value = route.fullPath
        }
        currentTab.value = route.fullPath
        bianli(props.menuItems, route.fullPath)


        // if (route.fullPath != currentTab.value) {
        //     tabsArr.value.push({
        //         title: route?.meta?.title,
        //         routerPath: route.fullPath,
        //     })
        //     currentTab.value = route.fullPath
        //     // defaultActive.value = route.fullPath
        // }
    }, {
        immediate: true
    })

    const formData: Raw<any> = markRaw([
        {
            command: '刷新',
            currentIcon: Refresh,
            name: '刷新'
        },
        {
            command: '关闭其他',
            currentIcon: Close,
            name: '关闭其他'
        },
        {
            command: '关闭左侧',
            currentIcon: Refresh,
            name: '关闭左侧'
        },
        {
            command: '关闭右侧',
            currentIcon: Refresh,
            name: '关闭右侧'
        }
    ])
    const handleCommand = (command: any) => {
        console.log(command)
        if (command == '刷新') {
            location.reload()
        } else if (command == '关闭其他') {
            tabsArr.value = tabsArr.value.filter((tab) => tab.routerPath == currentTab.value)
        } else if (command == '关闭左侧') {
            let flag = false
            let arr = []
            for(let i = 0; i < tabsArr.value.length; i++) {
                if (currentTab.value == tabsArr.value[i].routerPath) {
                    flag = true
                }
                if (flag == true) {
                    arr.push(tabsArr.value[i])
                }
            }
            tabsArr.value = arr
        } else if (command == '关闭右侧') {
            console.log(defaultActive.value)
            console.log(currentTab.value)
            console.log(tabsArr.value)
            let flag = true
            let arr = []
            for(let i = 0; i < tabsArr.value.length; i++) {
                if (flag == true) {
                    arr.push(tabsArr.value[i])
                }
                if (currentTab.value == tabsArr.value[i].routerPath) {
                    flag = false
                }
            }
            tabsArr.value = arr
        }
    }
    
</script>

<style lang="scss" scoped>
    .page-head {
        display: flex;
        // justify-content: space-between;
        align-items: center;
        // height: 50px;
        box-sizing: border-box;
        padding: 10px 0;
        // border-bottom: 1px solid #000;
        box-shadow: 0 0px 10px 10px #f2f2f2;
    }
    
    .my-tabs {
        flex: 1;
        overflow: hidden;
        padding-left: 20px;
        padding-right: 20px;
        :deep(.el-tabs__header) {
            margin: 0;
        }
    }
    :deep(.el-tabs--card>.el-tabs__header) {
        border-bottom: 0;
    }
    .my-icon {
        @include my-home-head-icon;
    }
    .my-dropdown-head {
        display: flex; 
        align-items: center; 
        cursor: pointer;
    }
    
</style>